import Taro, {
  Component
} from '@tarojs/taro'
import {
  View,
  Text
} from '@tarojs/components'
import './orderDetail.css'
import {
  AtButton,
  AtInput,
  AtIcon,
  AtGrid
} from 'taro-ui'

export default class OrderDetail extends Component {

  constructor(props) {
    super(props);
    this.state = {
      list: {}
    }
  }
  config = {
    navigationBarTitleText: '订单详情页'
  }

  // 页面被载入
  componentWillMount() {
    this.render();
  }

  // 页面渲染完成 
  componentDidMount() {}

  // 页面展示出来 
  componentDidShow() {}

  // 页面被隐藏 
  componentDidHide() {}

  render() {
    return (
      <View className='index'>
          <View className='detail-header at-row'>
            <View className='at-col at-col-1'>
              <AtIcon value='chevron-left' size='24' color='#FFF'></AtIcon>
            </View>
            <View className='at-col at-col-10'>订单详情</View>
            <View className='at-col at-col-1'></View>
          </View>
          <View className='detail-footer at-row'>
            <View className='at-col at-col-6'>订单作废</View>
            <View className='at-col at-col-6 footer-right'>再次购买</View>
          </View>
          <View className='at-row at-row--wrap detail-list'>
            <View className='at-col at-col-11 detail-inner'>
              <View className='at-row at-row--wrap'>
                <View className='at-col at-col-7'>
                  <View className='at-row at-row--wrap'>
                    <View className='at-col at-col-12 detail-inner-header'>订单状态</View>
                    <View className='at-col at-col-12'>公司名称<Text>广东智合</Text></View>
                    <View className='at-col at-col-12'>订货单号<Text>434783423466667878678</Text></View>
                    <View className='at-col at-col-12'>下单时间<Text>2018-09-11 10:10:10</Text></View>
                  </View>
                </View>
                <View className='at-col at-col-5'>
                  <View className='at-row at-row--wrap'>
                    <View className='at-col at-col-12 detail-inner-header'>订单待审核</View>
                  </View>
                </View>
              </View>
            </View>

            <View className='at-col at-col-11 detail-inner'>
              <View className='at-row at-row--wrap'>
                <View className='at-col at-col-7'>
                  <View className='at-row at-row--wrap'>
                    <View className='at-col at-col-12 detail-inner-header'>订单金额</View>
                    <View className='at-col at-col-12'>商品金额</View>
                  </View>
                </View>
                <View className='at-col at-col-5'>
                  <View className='at-row at-row--wrap'>
                    <View className='at-col at-col-12 detail-inner-header'>￥3000.00</View>
                    <View className='at-col at-col-12'>￥3000.00</View>
                  </View>
                </View>
              </View>
            </View>

            <View className='at-col at-col-11 detail-inner'>
              <View className='at-row at-row--wrap'>
                <View className='at-col at-col-7'>
                  <View className='at-row at-row--wrap'>
                    <View className='at-col at-col-12 detail-inner-header'>付款记录</View>
                    <View className='at-col at-col-12'>待付款 ￥3000.00</View>
                  </View>
                </View>
                <View className='at-col at-col-5'>
                  <View className='at-row at-row--wrap'>
                    <View className='at-col at-col-12 detail-inner-header'>未付款</View>
                  </View>
                </View>
              </View>
            </View>

            <View className='at-col at-col-11 detail-inner'>
              <View className='at-row at-row--wrap'>
                <View className='at-col at-col-7'>
                  <View className='at-row at-row--wrap'>
                    <View className='at-col at-col-12 detail-inner-header'>出库/发货记录</View>
                  </View>
                </View>
                <View className='at-col at-col-5'>
                  <View className='at-row at-row--wrap'>
                    <View className='at-col at-col-12 detail-inner-header'>备货中/待发货</View>
                  </View>
                </View>
              </View>
            </View>
          </View>
          <View className='at-row at-row--wrap detail-list'>
            <View className='at-col at-col-11 detail-inner'>
              <View className='at-row at-row--wrap'>
                <View className='at-col at-col-7'>
                  <View className='at-row at-row--wrap'>
                    <View className='at-col at-col-12 detail-inner-header'>备注信息</View>
                  </View>
                </View>
                <View className='at-col at-col-5'>
                  <View className='at-row at-row--wrap'>
                    <View className='at-col at-col-12 detail-inner-header'>0</View>
                  </View>
                </View>
              </View>
            </View>
            <View className='at-col at-col-11 detail-inner'>
              <View className='at-row at-row--wrap'>
                <View className='at-col at-col-7'>
                  <View className='at-row at-row--wrap'>
                    <View className='at-col at-col-12 detail-inner-header'>商品清单</View>
                  </View>
                </View>
                <View className='at-col at-col-5'>
                  <View className='at-row at-row--wrap'>
                    <View className='at-col at-col-12 detail-inner-header'>共2款 总数88</View>
                  </View>
                </View>
              </View>
            </View>
            <View className='at-col at-col-11 detail-inner'>
              <View className='at-row at-row--wrap'>
                <View className='at-col at-col-7'>
                  <View className='at-row at-row--wrap'>
                    <View className='at-col at-col-12 detail-inner-header'>订单附件</View>
                  </View>
                </View>
                <View className='at-col at-col-5'>
                  <View className='at-row at-row--wrap'>
                    <View className='at-col at-col-12 detail-inner-header'>0</View>
                  </View>
                </View>
              </View>
            </View>
            <View className='at-col at-col-11 detail-inner'>
              <View className='at-row at-row--wrap'>
                <View className='at-col at-col-7'>
                  <View className='at-row at-row--wrap'>
                    <View className='at-col at-col-12 detail-inner-header'>交货日期</View>
                  </View>
                </View>
                <View className='at-col at-col-5'>
                  <View className='at-row at-row--wrap'>
                  </View>
                </View>
              </View>
            </View>
          </View>
          <View className='at-row at-row--wrap detail-list'>
            <View className='at-col at-col-11 detail-inner'>
              <View className='at-row at-row--wrap'>
                <View className='at-col at-col-7'>
                  <View className='at-row at-row--wrap'>
                    <View className='at-col at-col-12 detail-inner-header'>收货信息</View>
                    <View className='at-col at-col-12'>客户名称：<Text>广东智合</Text></View>
                    <View className='at-col at-col-12'>收货人<Text>冯先生</Text></View>
                    <View className='at-col at-col-12'>广东省广州市白云区</View>
                  </View>
                </View>
                <View className='at-col at-col-5'>
                  <View className='at-row at-row--wrap'>
                    <View className='at-col at-col-12 detail-inner-header'></View>
                    <View className='at-col at-col-12'></View>
                    <View className='at-col at-col-12'>13888888888</View>
                    <View className='at-col at-col-12'></View>
                  </View>
                </View>
              </View>
            </View>
          </View>
          <View className='at-row at-row--wrap detail-list'>
            <View className='at-col at-col-11 detail-inner'>
              <View className='at-row at-row--wrap'>
                <View className='at-col at-col-7'>
                  <View className='at-row at-row--wrap'>
                    <View className='at-col at-col-12 detail-inner-header'>发票信息</View>
                    <View className='at-col at-col-12'>发票类型：<Text>不需要发票</Text></View>
                  </View>
                </View>
                <View className='at-col at-col-5'>
                  <View className='at-row at-row--wrap'>
                  </View>
                </View>
              </View>
            </View>
          </View>
      </View>
    )
  }
}